<!--新增父项目-->
<template>
  <div class="app-container-add">
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
      </el-col>
    </el-row>
    <div ref="mainCont" class="main-content">
      <el-card class="box-card" shadow="never">
        <div class="main-content-body">
          <el-form
            ref="addForm"
            class="data-form"
            :model="formData"
            label-width="80px"
          >
            <el-row :gutter="20">
              <el-col :lg="8" :xl="6">
                <el-form-item label="项目名称" prop="proName">
                  <el-input v-model="formData.proName" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="试验类型" prop="experimentType">
                  <el-select :value="formData.experimentType" readonly size="medium" placeholder="">
                    <el-option
                      v-for="item in TypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="试验单位" prop="companyId">
                  <el-input v-model="formData.enterpriseName" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="委托单位" prop="clientEnterpriseId">
                  <el-input v-model="formData.clientEnterpriseId" placeholder="" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="联系人" prop="clientContacts">
                  <label slot="label" v-html="`联&ensp;系&ensp;人`" />
                  <el-input v-model="formData.clientContacts" placeholder="" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="联系电话" prop="contactsPhone">
                  <el-input v-model="formData.contactsPhone" placeholder="" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="完成日期" prop="finishDate">
                  <el-input v-model="formData.finishDate" placeholder="" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="" prop="achievementList">
                  <label slot="label" v-html="`委&ensp;托&ensp;单`" />
                  <FileUplode
                    ref="fileUplode"
                    :edit-file-list="experimentFileList"
                    :status="status"
                    :read-only="true"
                    @getFileList="getTrustDeed"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form class="data-form" :inline="true" :model="filters" label-width="40px">
            <div class="two-level-title">勘探列表</div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="编号">
                  <el-input v-model="filters.explorationCode" size="medium" />
                </el-form-item>
                <el-form-item style="margin-left:5px" label="类型">
                  <el-input v-model="filters.explorationType" size="medium" />
                </el-form-item>
                <el-button type="primary" size="medium" style="margin-left:10px" @click="getList">搜索</el-button>
              </el-col>
              <el-col :span="24">
                <el-table ref="multipleTable" :data="tableData" height="500px" style="width: 100%;" stripe class="table-list removePadding" size="mini">
                  <el-table-column prop="explorationCode" label="编号" min-width="160" align="center" :show-overflow-tooltip="true" />
                  <el-table-column prop="explorationType" :formatter="formatExplorationType" label="类型" min-width="120" align="center" :show-overflow-tooltip="true" />
                  <el-table-column prop="x" label="坐标经度" min-width="60" align="center" :show-overflow-tooltip="true" />
                  <el-table-column prop="y" label="坐标纬度" min-width="60" align="center" :show-overflow-tooltip="true" />
                </el-table>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
// 上传文件
import FileUplode from '@/components/Upload/FileUplode'
import { getTestById } from '@/api/projectManage/ProjectAllocation/testCommission'
import { listNoExploration } from '@/api/projectManage/project/exploration'
import { mapState } from 'vuex'
export default {
  name: 'Add',
  components: {
    FileUplode
  },
  data() {
    return {
      experimentFileList: [], // 回显委托单
      status: '',
      tableData: [],
      filters: {
        explorationCode: '',
        explorationType: '',
        proId: ''
      },
      /* 表单 start */
      formData: {
        proId: '',
        proName: '', // 项目名称
        experimentType: '', // 试验类型
        companyId: '', // 试验单位
        enterpriseName: '',
        clientEnterpriseId: '', // 委托单位
        clientContacts: '', // 联系人
        contactsPhone: '', // 联系电话
        finishDate: '', // 完成日期
        achievementList: '', // 委托单
        explorationList: []

      },
      TypeOptions: [
        {
          value: '0',
          label: '标准固结实验'
        },
        {
          value: '1',
          label: '快速固结实验'
        },
        {
          value: '2',
          label: '其他'
        }
      ]
      /* 表单 end */
    }
  },
  computed: {
    ...mapState({
      explorationType: state => state.basicInfo.explorationType // 勘探点类型全部
    })
  },
  mounted() {
    const { proId, proName, id } = this.$route.query
    this.formData.proId = proId
    this.formData.proName = proName
    this.filters.proId = proId
    this.handleDetail(id)
    // this.getList()
  },
  methods: {
    // 翻译勘探点类型
    formatExplorationType(row) {
      if (row.explorationType) return this.selectDictLabel(this.explorationType, row.explorationType)
    },
    async getList() {
      const { data: { rows }} = await listNoExploration(this.filters)
      this.tableData = rows
    },
    async handleDetail(id) {
      const { data } = await getTestById(id)
      this.formData = { ...this.formData, ...data }
      this.formData.enterpriseName = data.companyName
      if (data.achievementList && data.achievementList.length) {
        this.experimentFileList = data.achievementList
      }
      this.tableData = data.explorationList
      /* const selectIds = data.explorationList.map(item => item.id)
      this.tableData.forEach(item => {
        if (selectIds.includes(item.id)) {
          this.$refs.multipleTable.toggleRowSelection(item)
        }
      })*/
    },
    // 委托单
    getTrustDeed(fileList) {
      this.formData.achievementList = fileList
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
    /* 新增/编辑弹层 end*/
  }
}
</script>

<style lang="scss">
</style>
